import React, { useState, useEffect } from 'react';

import "./createActivity.less"
import Content from "./components/content/content"
export default function(props){
  const [state, setState] = useState()
  const [tags, setTags] = useState([
    {id: 100, name: "全部", show: true},
    {id: 2, name: "进行中", show: false},
    {id: 3, name: "未开始", show: false},
    {id: 5, name: "已结束", show: false},
    {id: 1, name: "待审核", show: false},
    {id: 4, name: "已驳回", show: false},
    {id: 11, name: "草稿箱", show: false},
  ])
  const [selectTags, setSelectTags] = useState([100])

  useEffect(() => {

  }, [])

  const handleTags = (item) => {  // 点击修改 tags
    // console.log(item, "--", index)
    let a = tags.map(m => ({...m, show: item.id == m.id ? true : false}))
    let selectId = item.id  // 选中的 id
    setSelectTags([selectId])
    setTags(a)
  }

  return (
    <div className='create_activity_content'>
        <div className='activity_title'> 创建活动 </div>

        {/* 点击 tags 切换 按钮 */}
        <div className='activity_tags'> 
          {tags.map((item, index) => {
            return (
              <div key={item.id} className="activity_tags_item" onClick={() => {handleTags(item)}} > 
                <div className={ item.show ? 'activity_tags_name' : null }> {item.name} </div>
              </div>
            )
          })}
        </div>

        {/* 最下面 内容 区域 input  +  table */}
        <Content selectTags={selectTags} />

    </div>
  )
}